<template>
	<view class="suggested m-t30">
		<text class="label p-l24 text-700-132">名企推荐</text>

		<scroll-view scrollX="true" :showScrollbar="false">
			<view class="flex p-h24">
				<view
					v-for="(item, index) in companys"
					:key="index"
					class="card flex-d-c m-r20"
					:data-url="`pages/office/firm/firm?id=${item.id}`"
					@click="goto"
				>
					<image
						class="cover"
						:src="genStaticUrl(item.images.split(',')[0])"
						mode="aspectFill"
					/>
					<text class="title text-500-126">{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type { FamousCompany } from "@/types/api.d.ts";
import { genStaticUrl } from "@/utils/utils";
import { useNavigator } from "@/hooks/use-navigator";

const companys = ref<FamousCompany[]>([]);

const { goto } = useNavigator();

onMounted(() => {
	getCompany();
});

const getCompany = async () => {
	const params = {};

	const res = await uni.$u.get<FamousCompany[]>("/company/ming", params);

	if (res.code == 1) {
		companys.value = res.data;
	}
};
</script>

<style lang="scss" scoped>
.suggested {
	width: 100%;
	min-height: 300rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;
}

.label {
	line-height: 94rpx;
}

.cover {
	width: 227rpx;
	height: 126rpx;
	border-radius: 14rpx;
}
.title {
	padding: 16rpx 0;
}
</style>
